<#include "/common/taglibs.ftl" />
<@menu code='profile.password'/>
<title><@spring.message code="my.profile" /></title>
<div class="row">
    <div class="col-xl-3 col-lg-4">
        <#include "/personal/profile/sidebar.ftl" />
    </div>
    <div class="col-xl-9 col-lg-8">
        <div class="m-portlet m-portlet--full-height m-portlet--tabs  ">
            <div class="m-portlet__head">
                <div class="m-portlet__head-tools">
                    <#include "/personal/profile/nav.ftl" />
                </div>
                <div class="m-portlet__head-tools">
                    <#include "/personal/profile/actions.ftl" />
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane active">
                    <form id="passwordForm" method="POST" class="m-form m-form--fit m-form--label-align-right">
                        <div class="m-portlet__body">
                            <div class="m-form__content">
                                <@showMessage />
                                <#include "/common/taglibs/validationMessage.ftl">
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="example-text-input" class="col-2 col-form-label"><@spring.message code="user.old.password"/></label>
                                <div class="col-7">
                                    <input type="password" class="form-control" name="oldPlainPassword"/>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="example-text-input" class="col-2 col-form-label"><@spring.message code="user.new.password"/></label>
                                <div class="col-7">
                                    <input type="password" class="form-control" name="plainPassword" id="password"/>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="example-text-input" class="col-2 col-form-label"><@spring.message code="user.password.confirm"/></label>
                                <div class="col-7">
                                    <input type="password" class="form-control" name="passwordConfirm"/>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__foot m-portlet__foot--fit">
                            <div class="m-form__actions">
                                <div class="row">
                                    <div class="col-2">
                                    </div>
                                    <div class="col-7">
                                        <button type="submit" class="btn btn-accent m-btn m-btn--air m-btn--custom"><@spring.message code="button.submit"/></button>&nbsp;&nbsp;
                                        <button type="reset" class="btn btn-secondary m-btn m-btn--air m-btn--custom"><@spring.message code="button.cancel"/></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<page-plugin-style>
</page-plugin-style>
<page-plugin-script>
</page-plugin-script>
<page-style>
</page-style>
<page-script>
    <script>
        jQuery(document).ready(function() {
        	var $form = $("#passwordForm");
        	$.m.form.validate($form, {
		    	rules: {
		    		oldPlainPassword:{
	                	required: true,
	                	minlength: 6
	                },
	                plainPassword:{
	                	required: true,
	                	minlength: 6
	                },
	                passwordConfirm:{
	                	required: true,
	                	equalTo: "#password"
	                }
		    	}
		    });
        });
    </script>
</page-script>